<template>
  <view
    class="items w-[700rpx] p-1 border-box mx-auto bg-white rounded-lg shadow-md mb-2"
    @tap="jump"
  >
    <!-- 状态栏 -->
    <view class="flex justify-between items-center p-2">
      <view class="flex items-center gap-2">
        <IconFont
            font-class-name="iconfont"
            class-prefix="icon"
            name="wode-wode"
            color="#ff9900"
            size="15"
          />
        <text class="text-[24rpx]">{{item.name}}</text>
        <!-- <view
          class="w-16 h-6 text-[24rpx] rounded-full bg-[#ff9900] text-white flex items-center justify-center"
        >
          <text>待接单</text>
        </view> -->
      </view>
      <view class="text-[#ff9900] text-[24rpx]">{{ maps[item.status] }}</view>
    </view>

    <!-- 时间和价格 -->
    <view class="p-2">
      <view class="flex justify-between items-center mb-2">
        <view class="flex items-center gap-2">
          <IconFont
            font-class-name="iconfont"
            class-prefix="icon"
            color="#aaa"
            name="shijian1"
            size="15"
          />
          <text class="text-[24rpx] text-gray-800">{{ item.createtime }}</text>
        </view>
        <text class="text-[24rpx] text-gray-800">{{ item.amount ? `¥${item.amount}` : '未报价' }}</text>
      </view>
     
      <view class="flex items-center justify-between mb-4">
        <view class="flex items-center gap-2">
          <!-- <view class="w-4 h-4 rounded-full bg-yellow-500"></view> -->
          <IconFont
            font-class-name="iconfont"
            class-prefix="icon"
            name="tuanduicankaoxian-"
            color="#aaa"
            size="15"
          />
          <text class="text-[24rpx] text-gray-800 flex-1">{{
            fullAddress
          }}</text>
          <!-- <IconFont name="right" color="#aaa" size="14"/> -->
        </view>
      </view>

      <!-- 订单编号 -->
     
      <view class="flex items-center gap-2 text-[24rpx]">
        <text class="text-gray-800">订单编号：</text>
        <text class="text-gray-600">{{ item.orderno }}</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { IconFont } from "@nutui/icons-vue-taro";
import { ref, computed, defineProps } from "vue";
import Taro from "@tarojs/taro";

const maps = ref({
  "999": "全部",
  "0": "未接单",
  "1": "待评估",
  "2": "待施工",
  "3": "施工中",
  "4": "已完工",
  "5": "已完成",
  "-1": "已关闭",
});
// 定义props类型
interface OrderItem {
  //   time: string;
  //   price: string;
  //   startAddress: string;
  //   endAddress: string;
  //   orderId: string;

  address: string;
  amount: string;
  city: string;
  createtime: string;
  district: string;
  evaluatetime: string;
  evaluator: number;
  id: number;
  is_del: number;
  name: string;
  orderno: string;
  pic: string;
  province: string;
  remark: string;
  status: number;
  telephone: string;
  userid: number;
}

// 接收父组件传递的props
const props = defineProps<{
  item: OrderItem;
}>();

const fullAddress = computed(() => {
  return (
    props.item.province +
    props.item.city +
    props.item.district +
    props.item.address
  );
});

function jump(){
  Taro.setStorageSync('orderInfo', props.item)
  Taro.navigateTo({
    url: '/other/order/info'
  })
}
</script>

<style lang="scss">
/* 在这里可以添加任何自定义样式 */
// .items {
//   .nut-icon {
//     height: fit-content;
//     line-height: 100%;
//   }
// }
</style>
